---
title: Contributing to HyperUI
summary: Learn how to get involved with HyperUI development, report issues, and add new components or collections.
date: 04/18/2025
emoji: 🫵
---

Contributing to open source can feel overwhelming, but getting involved with HyperUI is straightforward and rewarding. Here’s how you can help make HyperUI even better.

## Found a Bug or Have an Idea?

If you notice something off—like a typo, accessibility issue, or SEO concern—or if you have an idea for an improvement, please [open an issue](https://github.com/markmead/hyperui/issues/new/choose). This helps us discuss and plan the best way forward together.

## Want to Add or Improve Something?

Thinking of adding a new component or feature? Before you start, [create an issue](https://github.com/markmead/hyperui/issues/new/choose) so we can chat about your idea. For new components, sharing example designs is helpful.

### Pull Request Process

All pull requests are reviewed before merging. You may receive feedback—this is part of making HyperUI great! If feedback from the first review isn’t addressed by the third review, the PR will be closed. If new feedback comes up in the third review, that’s fine—just address it as usual.

### Setting Up HyperUI Locally

HyperUI runs on Next.js. To get started:

```
git clone git@github.com:markmead/hyperui.git
yarn install
yarn dev
yarn css --watch
```

### Adding a New Component

For example, to add a new footer component in the marketing category:

1. Create a new file in `/public/components/marketing/footers`.
2. Add the component to the group in `/src/data/components/marketing/footers.mdx`.

Component files are named incrementally (e.g., 21, 22, etc.). Please follow this pattern. You can use `container:` to adjust the preview position—these classes won’t affect the copied code.

#### Component Guidelines

1. Use Tailwind CSS for all components.
2. Only use official Tailwind CSS plugins. Declare any plugins used in the component object in the MDX file, for example: `plugins: ['@tailwindcss/forms']`.

See examples in the [input component](/components/application/pagination#component-3).

### Creating a New Collection

To propose a new collection, [open an issue](https://github.com/markmead/hyperui/issues/new/choose) so we can discuss and brainstorm ideas together.

### Console Warnings

When developing locally, you might see the warning: `params should be awaited before using its properties`. This can be ignored—`await` is used for `getX` functions that resolve data from `params`.
